<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Article</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<link rel="stylesheet" href= "../assets/markdownLayout/git_md.css">
<link rel="stylesheet" href= "../assets/theme/theme_fresh.css">
<link rel="stylesheet" href= "../assets/hightlightStyle/atom-one-light.css">

<style>
    .markdown-body{
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }
</style>


</head>
<body>
    
    <!--header-->
    <div class="header">
    <header>
        <div class="logo"><a href="../index.html"><span>hh2o4</span></a></div>
        <nav>
            
                <li> <a href="#">articles</a> </li>
                <li> <a href="../contact.html">contact</a> </li>
                <li> <a href="#">pictures</a> </li>
            
        </nav>
    </header>
</div>

    <!--content-->
    <div class="content">
        <h1>body占满空间的方法</h1>
        <div class="info"><span class="date">发表时间: 2017-09-02</span></div>
        <article class="markdown-body">
            <p>做小游戏页面的时候，希望用flex布局，将游戏区域始终垂直水平居中与浏览器窗口，但若不给body设置默认高度，则body的高度始终是与游戏区域高度是一致的，也就不能达到垂直居中的效果。</p>
<p>我们知道body的高度通常是被内容撑开的，要想使body的高度自己适应浏览器窗口的高度，可以用以下办法：</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">html</span>, <span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
}
</code></pre>
<p>使用场景如下：</p>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        * {
            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
        }
        <span class="hljs-selector-tag">html</span> {
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
        }
        <span class="hljs-selector-tag">body</span> {
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">display</span>: flex;
            <span class="hljs-attribute">flex-direction</span>: row;
            <span class="hljs-attribute">align-items</span>: center;
            <span class="hljs-attribute">justify-content</span>: center;
            <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span> black;

            <span class="hljs-attribute">box-sizing</span>: border-box;
        }

        <span class="hljs-selector-id">#container</span> {
            <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;
            <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span> black;
            <span class="hljs-attribute">display</span>: flex;
            <span class="hljs-attribute">flex-direction</span>: row;
            <span class="hljs-attribute">align-items</span>: center;
            <span class="hljs-attribute">justify-content</span>: center;
        }

        <span class="hljs-selector-id">#inner</span> {
            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
            <span class="hljs-attribute">border</span>: solid black <span class="hljs-number">1px</span>;
            <span class="hljs-attribute">background-color</span>: yellow;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inner"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>

        </article>
    </div>

    <!--footer-->
    <footer>
    
    <p>©2017-2018 &nbsp; (o^.^o) &nbsp; hh2o4</p>
    <p>Themed by hh2o4</p>
    
</footer>
    
</body>
</html>